<template>
  <div>
    <div class="header" style="margin-bottom: 20px">
      <!-- <a-button type="primary" icon="plus">新增商品</a-button> -->
      <div class="input">
        <a-input placeholder="电话号码" v-model="phone" />
      </div>

      <a-button type="primary" icon="search" @click="serach">搜索</a-button>
    </div>
    <a-table
      :columns="columns"
      :data-source="rows"
      :scroll="{ x: 1500, y: 300 }"
      :rowKey="(record) => record.id"
    >
      <span slot="percentage" slot-scope="record">
        <!-- <img :src="voucher_img(record)" alt="" /> -->
        <span>{{ percentage(record) }}</span>
      </span>

      <a-space
        size="8"
        slot="action"
        slot-scope="text, record"
        style="display: flex; justify-content: space-between"
      >
        <a-button type="primary" slot="action" @click="agree(record)">
          同意
        </a-button>
        <a-button type="danger" slot="action" @click="refuse(record)">
          拒绝
        </a-button>
      </a-space>

      <a slot="action"></a>
    </a-table>

    <div class="popup" v-show="agree_popup">
      <p class="title">是否同意？</p>
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          <a-icon type="exclamation" />
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="agree_confirm()">
          <a-icon type="check" />
          确定
        </a-button>
      </div>
    </div>

    <div class="popup" v-show="refuse_popup">
      <p class="title">是否拒绝？</p>
      <div class="buttons">
        <a-button type="danger" slot="action" @click="cancel()">
          <a-icon type="exclamation" />
          取消
        </a-button>
        <a-button type="primary" slot="action" @click="refuse_confirm()">
          <a-icon type="check" />
          确定
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    fixed: "left",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "creation_date",
    key: "creation_date",
    fixed: "left",
    width: 200,
  },
  {
    title: "商品名称",
    dataIndex: "product_name",
    key: "product_name",
    width: 150,
  },
  {
    title: "等级",
    dataIndex: "membership_level",
    key: "membership_level",
    width: 150,
  },
  {
    title: "邀请码",
    dataIndex: "invitation_code",
    key: "invitation_code",
    width: 150,
  },

  { title: "购买商品价格", dataIndex: "price", key: "price", width: 150 },
  {
    title: "电话",
    dataIndex: "phone",
    key: "phone",
    width: 150,
  },
  {
    title: "收益率",
    dataIndex: "income",
    key: "income",
    width: 150,
    scopedSlots: { customRender: "percentage" },
  },
  {
    title: "收益溢出率",
    dataIndex: "overflow",
    key: "overflow",
    width: 150,
    scopedSlots: { customRender: "percentage" },
  },
  {
    title: "账户余额",
    dataIndex: "account_balance",
    key: "account_balance",
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right",
    width: 180,
    scopedSlots: { customRender: "action" },
  },
];

import { mapState, createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("balance");
export default {
  data() {
    return {
      columns,
      refuse_popup: false,
      agree_popup: false,
      phone: "",
    };
  },
  computed: {
    ...mapState({
      rows: (state) => state.balance.rows,
      total: (state) => state.balance.total,
    }),
  },
  created() {
    this.getList();
  },
  methods: {
    ...mapActions(["audit"]),
    getList() {
      this.$store.dispatch("balance/getBalanceList");
    },
    agree(item) {
      this.agree_popup = !this.agree_popup;
      this.info = item;
      console.log(this.info);
    },
    refuse(item) {
      this.refuse_popup = !this.refuse_popup;
      this.info = item;
    },
    cancel() {
      this.agree_popup = false;
      this.refuse_popup = false;
    },
    button(item) {
      if (item.approval_status == 0) {
        return true;
      } else {
        return false;
      }
    },
    async refuse_confirm() {
      let result = {
        id: this.info.id,
        status: 2,
      };
      this.refuse_popup = !this.refuse_popup;
      this.$store.commit("money/modify", result);
      const success = await this.audit();
      if (success) {
        this.$message.success("成功");
        this.getList();
      } else {
        this.$message.error("失败");
      }
    },
    async agree_confirm() {
      let result = {
        id: this.info.id,
        status: 1,
      };
      this.agree_popup = !this.agree_popup;
      this.$store.commit("money/modify", result);
      const success = await this.audit();
      if (success) {
        this.$message.success("成功");
        this.getList();
      } else {
        this.$message.error("失败");
      }
    },
    percentage(item) {
      console.log(item);
      return item * 100 + "%";
    },
    serach() {
      if (this.phone.length == 11) {
        this.$store.commit("balance/serach", this.phone);
        this.getList();
        this.$message.success("成功");
      } else {
        this.$message.error("电话号码格式不正确");
      }
    },
  },
};
</script>

<style>
.popup {
  border-radius: 15px;
  background-clip: padding-box;
  width: 300px;
  height: 150px;
  padding: 15px 35px 15px 35px;
  background: #fefefe;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.title {
  text-align: center;
  margin-top: 20px;
}
.header {
  display: flex;
}
.input {
  width: 200px;
  display: flex;
  margin: 0 10px 0 30px;
}
</style>
